<template>
  <div class="marketDemand">
    <div class="table">
      <a-row class="last" v-if="headerList">
        <a-col
          :span="item.span"
          v-for="(item, index) in headerList"
          :key="index"
          >{{ item.thName }}</a-col
        >
      </a-row>
      <a-row
        :gutter="16"
        v-for="(item, index) in tableList"
        :key="'item' + index"
        class="last"
      >
        <a-col class="gutter-row" :span="serialSpan" v-if="serialSpan">
          <div class="gutter-box name">
            {{ index + 1 }}
          </div>
        </a-col>
        <a-col class="gutter-row" :span="24 - serialSpan - 5">
          <div class="gutter-box name" @click="detailClick(item)">
            {{ item[columnName] }}
          </div>
        </a-col>
        <a-col class="gutter-row" :span="5">
          <div class="gutter-box">
            <div>{{ item[time] }}</div>
          </div>
        </a-col>
      </a-row>
      <a-row>
        <Pagination
          :total="total"
          @pageChange="pageChange"
          :pageNum="pageNum"
        ></Pagination>
      </a-row>
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/common/Pagination'

export default {
  props: {
    pageNum: Number,
    tableList: Array,
    headerList: Array,
    total: Number,
    serialSpan: {
      type: Number,
      default: 0
    },
    columnName: {
      type: String,
      default: 'title'
    },
    time: {
      type: String,
      default: 'pulishDate'
    },
  },
  components: {
    Pagination
  },
  data() {
    return {}
  },
  mounted() { },
  methods: {
    async detailClick(item) {
      this.$emit('detailClick', item)
    },
    pageChange(e) {
      this.$emit('pageChange', e)
    }
  }
}
</script>
